import { FC } from "react";

//引入资源
import styles from './styles.module.scss'
import { RightOutlined } from "@ant-design/icons";
import { Link, useNavigate } from "react-router-dom";
// 引入类型
import { Result } from "../../api/ContentCard/type";


interface Props {
    Goods: Result
}


const ContentCard: FC<Props> = (props) => {

    const { Goods } = props
    const Navigate = useNavigate()

    // 跳转二级目录
    const goToSub = (id: string) => {
        Navigate(`/category/sub?id=${id}`, {
            replace: false,
        })
    }
    // 跳转商品详细

    const goToGoodsInfo = (id: string) => {
        Navigate(`/product?id=${id}`, {
            replace: false
        })
    }

    return (
        <div className={styles.container}>
            <div className={styles.ContentCard}>
                <div className={styles.title}>
                    <h2>{Goods.name}</h2>
                    <div>
                        {Goods.children.slice(0, 4).map((item) => {
                            return (
                                <span key={item.id} onClick={() => {
                                    goToSub(item.id)
                                }}>{item.name}</span>
                            )
                        })}
                    </div>
                    <label><Link to={`/category/?id=${Goods.id}`}>查看全部
                    </Link><RightOutlined style={{ fontSize: 18, color: 'gray' }} /></label>
                </div>
                <div className={styles.content}>
                    <Link to={`/category/?id=${Goods.id}`}>
                        <div className={styles.left}>
                            <img src={Goods.picture} alt="" />
                            <span>{Goods.saleInfo}</span>
                        </div>
                    </Link>
                    <div className={styles.right}>
                        {
                            Goods.goods.map((item) => {
                                return (
                                    <div key={item.id} className={styles.box} onMouseEnter={() => {

                                    }}>
                                        <img src={item.picture} alt="" onClick={() => {
                                            goToGoodsInfo(item.id)
                                        }} />
                                        <span>
                                            <span>{item.name}</span>
                                            <span>{item.desc}</span>
                                            <span>￥{item.price}</span>
                                        </span>
                                        <div className={styles.findLike}>
                                            <span>找相似</span>
                                            <span>发现更多宝贝</span>
                                        </div>
                                    </div>
                                )
                            })
                        }

                    </div>
                </div>
            </div>
        </div>
    )
}


export default ContentCard